import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex) //安装 Vuex 插件，使其在 Vue 实例中可用

//创建一个 Webpack 的上下文，这样可以动态加载 ./modules 目录下的所有 .js 文件。true 表示递归子目录，/\.js$/ 是正则表达式，用于匹配 .js 文件
//require.context 是 Webpack 的一个特殊功能，它可以用来创建一个包含指定目录下的所有模块的上下文。在这里，它创建了一个上下文，用于加载 ./modules 目录下（包括子目录）的所有 .js 文件
const modulesFiles = require.context('./modules', true, /\.js$/)

//遍历所有匹配的模块文件。modulesFiles.keys() 获取所有模块文件的路径列表，reduce 方法用于将这些模块文件汇总成一个对象
//keys() 方法返回一个数组，其中包含了所有符合 require.context 条件的模块文件路径
//educe 方法遍历 modulesFiles.keys() 返回的路径数组，每个路径都是 modulePath。在每次迭代中，modulePath 是当前正在处理的文件路径
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    //从文件路径中提取模块名称。假设路径格式为 ./modules/moduleName.js，此行代码会提取 moduleName 部分
    //假设 modulePath 是 ./modules/user.js
    //modulePath.lastIndexOf('/') 会返回 8，即最后一个斜杠的位置
    //modulePath.substring(2, 8) 会返回 modules，其中 2 是起始位置，8 是结束位置（不包括索引位置 8）
    //所以，moduleName 通过这种方式从路径中提取出来，即去掉了前面的 ./ 和路径中的 / 部分，只保留了模块的名称部分
    const moduleName = modulePath.substring(2, modulePath.lastIndexOf('/'))
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default //将模块的默认导出赋值到 modules 对象中，以模块名称为键
    return modules
}, {})

const store = new Vuex.Store({
    //创建一个新的 Vuex 存储实例。modules 是之前动态导入的模块集合，getters 是导入的 getter 函数
    modules,
    getters
})

export default store